---
import { getCollection } from "astro:content";
import Main from "@/layouts/Main.astro";
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Card from "@/components/Card.astro";
import getPostsByGroupCondition from "@/utils/getPostsByGroupCondition";
import { SITE } from "@/config";

// Redirect to 404 page if `showArchives` config is false
if (!SITE.showArchives) {
  return Astro.redirect("/404");
}

const posts = await getCollection("blog", ({ data }) => !data.draft);

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

// 配置懒加载参数
const INITIAL_YEARS_TO_SHOW = 2;
const YEARS_PER_PAGE = 1;

// 按年份分组并排序
const yearGroups = getPostsByGroupCondition(posts, post =>
  post.data.pubDatetime.getFullYear()
);
const sortedYears = Object.entries(yearGroups)
  .sort(([yearA], [yearB]) => Number(yearB) - Number(yearA));

// 准备客户端数据
const archivesDataForClient = {
  allPosts: posts,
  siteTimezone: SITE.timezone,
  initialYearCount: INITIAL_YEARS_TO_SHOW,
  yearsPerPage: YEARS_PER_PAGE,
};

// 获取初始显示的年份
const initialYears = sortedYears.slice(0, INITIAL_YEARS_TO_SHOW);
---

<Layout title={`Archives | ${SITE.title}`}>
  <Header />
  <Main pageTitle="Archives" pageDesc="">
    <div id="archives-container">
      {
        initialYears.map(([year, yearGroup]) => (
          <div class="year-section" data-year={year}>
            <span class="text-2xl font-bold">{year}</span>
            <sup class="text-sm">{yearGroup.length}</sup>
            {Object.entries(
              getPostsByGroupCondition(
                yearGroup,
                post => post.data.pubDatetime.getMonth() + 1
              )
            )
              .sort(([monthA], [monthB]) => Number(monthB) - Number(monthA))
              .map(([month, monthGroup]) => (
                <div class="flex flex-col sm:flex-row">
                  <div class="mt-6 min-w-36 text-lg sm:my-6">
                    <span class="font-bold">{months[Number(month) - 1]}</span>
                    <sup class="text-xs">{monthGroup.length}</sup>
                  </div>
                  <ul class="month-posts" data-month={month}>
                    {monthGroup
                      .sort(
                        (a, b) =>
                          Math.floor(
                            new Date(b.data.pubDatetime).getTime() / 1000
                          ) -
                          Math.floor(
                            new Date(a.data.pubDatetime).getTime() / 1000
                          )
                      )
                      .map(data => (
                        <Card {...data} showDescription={false} showCommentCount={false} imageClass={"w-[55px] h-[55px] object-cover rounded-md group-hover:opacity-90 transition-opacity duration-300"} />
                      ))}
                  </ul>
                </div>
              ))}
          </div>
        ))
      }
    </div>
    {sortedYears.length > INITIAL_YEARS_TO_SHOW && (
      <div id="load-more-trigger" class="h-10"></div>
    )}
  </Main>
  <Footer />
</Layout>

<div id="archives-data-json-container" data-json={JSON.stringify(archivesDataForClient)} style="display: none;"></div>

<script>
  import { initArchives } from '@/scripts/archives.js';

  document.addEventListener('astro:page-load', () => {
    const dataElement = document.getElementById('archives-data-json-container');

    if (dataElement && dataElement.dataset.json) {
      try {
        const clientData = JSON.parse(dataElement.dataset.json);
        initArchives(
          clientData.allPosts,
          clientData.siteTimezone,
          clientData.initialYearCount,
          clientData.yearsPerPage
        );
      } catch (e) {
        console.error("Failed to parse archives client data or initialize archives:", e);
      }
    }
  });
</script>